<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      option: {
        column: [{
          label: '懒加载',
          prop: 'id',
          type: 'tree',
          dicUrl: `${baseUrl}/getProvince?id={{key}}`,
          props: {
            label: 'name',
            value: 'code'
          },
          lazy: true,
          cacheData:[{
            name:'未加载数据',
            code:-1
          }],
          treeLoad: (node, resolve) => {
            let stop_level = 2;
            let level = node.level;
            let data = node.data || {}
            let code = data.code;
            let list = [];
            let callback = () => {
              resolve((list || []).map(ele => {
                return Object.assign(ele, {
                  leaf: level >= stop_level
                })
              }));
            }
            if (level == 0) {
              axios.get(`${baseUrl}/getProvince`).then(res => {
                list = res.data;
                callback()
              })
            }
            if (level == 1) {
              axios.get(`${baseUrl}/getCity/${code}`).then(res => {
                list = res.data;
                callback()
              })
            } else if (level == 2) {
              axios.get(`${baseUrl}/getArea/${code}`).then(res => {
                list = res.data;
                callback()
              })
            } else {
              list = []
              callback()
            }
          }
        }]
      }
    };
  }
}
</script>